<template>
	<view>
		<view class="header">
			<view class="top_part">
				<view>累计收入</view>
				<view class="btn">
					<u-button @click="openModel" size="mini" hover-class="none"
						:custom-style="{background:'#20cbd4',color:'#fff'}">
						提现
					</u-button>
				</view>
			</view>
			<view>
				<text class="income">8888</text>
				<text class="income_unit">元</text>
			</view>
			<view class="bottom_part">
				<view>
					<view>累计提现</view>
					<view>¥999</view>
				</view>
				<view style="text-align: center;">
					<view>可提现</view>
					<view>¥999</view>
				</view>
				<view style="text-align: right;">
					<view>待入账</view>
					<view>¥999</view>
				</view>
			</view>
		</view>
		<view class="total_account">
			<text>{{accountList[current].text}}：</text>
			<text>{{accountList[current].price}}</text>
		</view>
		<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"
			active-color="#20cbd4" :bar-width="100"></u-tabs>
		<u-cell-group v-for="(item,index) in detailList" :key="index"
			:title="item.time" :border="false" :title-style="{fontSize:'25rpx'}">
			<u-cell-item :title="item.type" :value="item.price" 
				:arrow="false" :label="item.remark" ></u-cell-item>
		</u-cell-group>
		<u-modal width="auto" v-model="modelShow" :show-title="false" 
		confirm-color="#20cbd4" :show-cancel-button="true">
			<view class="modelContent">
				<view class="withdrawType">
					<view>提现到：</view>
					<u-radio-group v-model="value" active-color="#20cbd4">
						<u-radio :name="item.name" v-for="(item, index) in withdrawTypeList" :key="index">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="accountData">
					<text>{{value}}账号：</text>
					<u-input v-if="value=='支付宝'" 
						v-model="withdrawTypeList[0].accountInfo.accout" 
						:placeholder="'请输入'+value+'账号'"/>
					<u-input v-if="value=='微信'"
						v-model="withdrawTypeList[1].accountInfo.accout" 
						:placeholder="'请输入'+value+'账号'"/>
					<u-input v-if="value=='银行卡'" type="number"
						v-model="withdrawTypeList[2].accountInfo.accout" 
						:placeholder="'请输入'+value+'账号'"/>
				</view>
				<view class="accountData">
					<text>本人姓名：</text>
					<u-input v-if="value=='支付宝'"
						v-model="withdrawTypeList[0].accountInfo.userName" 
						placeholder="请输入本人真实姓名"/>
					<u-input v-if="value=='微信'"
						v-model="withdrawTypeList[1].accountInfo.userName" 
						placeholder="请输入本人真实姓名"/>
					<u-input v-if="value=='银行卡'"
						v-model="withdrawTypeList[2].accountInfo.userName" 
						placeholder="请输入本人真实姓名"/>
				</view> 
				<view class="accountData" v-if="value=='银行卡'">
					<text>开户银行：</text>
					<u-input v-model="withdrawTypeList[0].accountInfo.userName" 
						placeholder="请输入银行卡开户银行"/>
				</view>
				<view class="accountData">
					<text>提现金额：¥</text>
					<u-input v-model="withdrawPrice" type="number"
						placeholder="请输入提现金额"/>
				</view>
			</view>
		</u-modal>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				modelShow:false,
				withdrawPrice:"",
				withdrawTypeList: [
					{
						name: '支付宝',
						accountInfo:{
							accout:"",
							userName:""
						}
					},
					{
						name: '微信',
						accountInfo:{
							accout:"",
							userName:""
						}
					},
					{
						name: '银行卡',
						accountInfo:{
							accout:"",
							userName:"",
							accountBank:""
						}
					}
				],
				value: '支付宝',
				accountList:[
					{text:"累计消费",price:"3000元"},
					{text:"账户余额",price:"3000元"},
					{text:"贡献值",price:"3000个"},
					{text:"星豆",price:"3000个"},
					{text:"券",price:"3000个"}
				],
				tabsList: [{
					name: '消费'
				},{
					name: '余额'
				}, {
					name: '贡献值'
				}, {
					name: '星豆'
				}, {
					name: '券'
				}],
				current: 0,
				detailList:[
					{
						idx:0,
						time:"2021-02-11 09:32:22",
						type:"收入",
						remark:"巨天毅购买商品分销佣金",
						price:"+¥45.99"
					},
					{
						idx:0,
						time:"2021-02-11 09:32:22",
						type:"提现",
						remark:"巨天毅购买商品分销佣金",
						price:"-¥45.99"
					},
					{
						idx:0,
						time:"2021-02-11 09:32:22",
						type:"支出",
						remark:"巨天毅购买商品分销佣金",
						price:"-¥45.99"
					}
				]
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			change(index) {
				this.current = index;
			},
			openModel(){
				this.modelShow=true;
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.header{
		background: linear-gradient(90deg, #20cbd4, #a0edf1) no-repeat;
		margin: 10rpx 30rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
	}
	.top_part{
		display: flex;
		justify-content: space-between;
	}
	.income{
		font-size: 50rpx;
	}
	.income_unit{
		font-size: 25rpx;
		margin-left: 10rpx;
	}
	.bottom_part{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.total_account{
		background: linear-gradient(90deg, #a0edf1, #20cbd4) no-repeat;
		margin: 10rpx 30rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		color: #13797f;
		font-size: 35rpx;
		font-weight: 650;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modelContent{
		padding: 40rpx;
	}
	.withdrawType{
		display: flex;
		margin-bottom: 15rpx;
	}
	.accountData{
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		border-bottom: 0.5rpx solid #E4E7ED;
	}
</style>
